<template>
  <div class="markdown-preview">
    <div>Tag:{{ curTag }}</div>
    <article-item 
      v-for="aArticle in $props.articleInfos.articleList" 
      :key="aArticle.id" 
      :article-info="aArticle"/>
    <div v-show="pageCount > 1">
      <span 
        v-for="pageNo in pageCount" 
        :key="pageNo" 
        :class="{pageNo: (curPageNo !== pageNo), selected: (curPageNo === pageNo)}" 
        @click ="selectPage">
        {{ pageNo }}
      </span>
    </div>
  </div>
</template>

<script>
import ArticleItem from '~/components/ArticleItem.vue'

export default {
  components: {
    ArticleItem
  },
  props: {
    articleInfos: {
      type: Object
    },
    curPageNo: {
      type: Number
    },
    curTag: {
      type: String
    },
    maxItem: {
      type: Number
    }
  },
  computed: {
    pageCount() {
      return ~~(this.articleInfos.totalCount / this.$props.maxItem) + 1
    }
  },
  // data() {
  //   return {
  //     curPageNo: 1
  //   }
  // },
  methods: {
    selectPage(event) {
      // this.curPageNo = +event.target.innerHTML;
      // this.articleData.articleList = [];
      this.$router.push({ path: '/list/all/' + +event.target.innerHTML })
    }
  }
}
</script>

<style scoped>
.pageNo {
  display: inline-block;
  margin: 5px;
  padding: 0 15px;
  color: gray;
  border: 1px solid gray;
  border-radius: 5px;
}
.pageNo:hover {
  color: #fff;
  border: 1px solid #fff;
}
.selected {
  display: inline-block;
  margin: 5px;
  padding: 0 15px;
  border-radius: 5px;
  color: burlywood;
  border: 1px solid burlywood;
}
</style>
